<template>
	<view>
		<scroll-view class="scro" scroll-y="true">
			<view v-for="item in listview" :key="item.sendshopId">
				<view class="items">
					<image :src="item.photos && item.photos.length > 0 ? item.photos[0].url : 'default-image-url'" mode="aspectFill"></image>
					<view class="text">
						<view class="name">{{ item.name }}</view>
						<view class="type">类型：{{ item.business.keytag }}</view>
						<view class="address">地址：{{ item.address }}</view>
						<view class="opentime">营业时间：{{ item.business.opentime_today }}</view>
						<view class="distance">离您：{{ Math.floor(item.distance) }}米</view>
						<view class="tel">电话：{{ item.business.tel }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<movable-area class="movable-area">
		<movable-view class="movable-view" x="200rpx" y="1000rpx" direction="all" @click="sendshop(word)">
			<view class="btn">+</view>
		</movable-view>
	</movable-area>
	
	</view>

</template>

<script>
import getPois from '../../utils/getPois';

export default {
	data() {
		return {
			shopList: [],
			user: null,
			word: null,
			linlishop: [],
			location: {}
		};
	},

async	onLoad(res) {
		this.user = uni.getStorageSync('user');
		this.location = getApp().globalData.location;
		console.log('onload:' + JSON.stringify(res.word));
		this.word=res.word
			
    await   this.getData()
    await	this.getshopData(this.word);		
	},
	computed: {
		listview() {
			return [...this.linlishop, ...this.shopList];
		}
	},
	methods: {
		async getData() {
			try {
				const pois = await getPois(this.location.longitude, this.location.latitude, this.word, getApp().globalData.receiveDistance);
			
				if (pois[1].data.pois) {
					this.shopList = pois[1].data.pois;
				} else {
					this.shopList = [];
				}
			} catch (error) {
				console.error('获取地图数据失败:', error);
				// 可以添加提示信息告知用户
			}
		},
		async getshopData(keyword) {
			const db = uniCloud.databaseForJQL();
			// 1. 强制类型转换 + 校验
			const longitude = Number(this.location?.longitude);
			const latitude = Number(this.location?.latitude);
			const maxDistance = Number(this.user?.receiveDistance || 500); // 默认5公里

			if (isNaN(longitude)) {
				console.error('经度非法:', this.location?.longitude);
				return;
			}
			if (isNaN(latitude)) {
				console.error('纬度非法:', this.location?.latitude);
				return;
			}
			if (isNaN(maxDistance)) {
				console.error('距离非法:', this.user?.receiveDistance);
				return;
			}
		
			// 2. 执行查询
			try {
				
				const res = await db
					.collection('sendshop')
					.geoNear({
						distanceField: 'distance',
						near: new db.Geo.Point(longitude, latitude),
						maxDistance: maxDistance
					})
					.match({
						'business.keytag': keyword
					})
					.end();
				console.log(".............",keyword);
				console.log('调试结果:', res);
				if (res.data.length === 0) {
					console.log('查询无数据');
				} else {
					this.linlishop = res.data;
			       
				}
			} catch (e) {
				console.error('[客户端详细错误]', {
					message: e.message,
					code: e.code,
					stack: e.stack
				});
				uni.showToast({ title: `查询失败: ${e.message}`, icon: 'none' });
			}
		},
			sendshop(word){
					uni.navigateTo({
						url:`/pages/sendShop/sendShop?key=${word}`
					})
				},
		
	}
};
</script>

<style>
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.scro {
	background: #ccc;
	width: 100%;
	height: 100%; /* 根据实际需求调整高度 */
}

.items {
	display: flex;
	margin-left: 25rpx;
	flex-wrap: nowrap;
	align-items: center;
	width: 680rpx;
	height: 250rpx;
	background-color: white;
	border-radius: 25rpx;
	margin-bottom: 25rpx;
	padding: 15rpx;
	font-size: 28rpx;
}

.items image {
	width: 250rpx;
	height: 250rpx;
	border-radius: 25rpx;
	margin-right: 20rpx;
}

.text {
	flex: 1;
	border-radius: 25rpx;
	display: flex;
	flex-direction: column;
}

.name {
	font-weight: 700;
}

.movable-area {
	//  可移动的范围
	height: 100vh;
	width: 750rpx;
	top: 0;
	position: fixed;
	pointer-events: none; //鼠标事件可以渗透
}
.movable-view {
	display: flex;
	font-size: 80rpx;
	align-items: center;
	justify-content: center;
	width: 140rpx; // 按钮大小
	height: 140rpx;
	border-radius: 70rpx;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
	background: #007aff;
	pointer-events: auto; //恢复鼠标事件
	color: #ffffff;
    position: fixed;
	right: 20rpx; 
	bottom: 20rpx; 
	z-index: 9999;
}
</style>
